<template>
  <div class="repayment-plan" :class="'theme-'+theme">
    <div class="container">
      <div class="card">
        <div class="card-cell">
          <span class="cell-label">信用卡额度</span>
          <span class="cell-content btn-color" v-html="card.creditBlance"></span>
        </div>
        <div class="card-cell">
          <span class="cell-label">设置还款总金额</span>
          <span class="cell-content">
            <x-input
              title
              :is-type="mostRepaySum"
              placeholder="设置还款金额"
              text-align="right"
              :show-clear="false"
              keyboard="number"
              type="number"
              required
              v-model="plan.useQuota"
            ></x-input>
          </span>
        </div>
        <div class="card-cell">
          <span class="cell-label">账单日期</span>
          <span class="cell-content text-overflow">
            <span v-html="plan.statementDate?`每月${plan.statementDate}日`:`未设置`"></span>
          </span>
        </div>
        <div class="card-cell">
          <span class="cell-label">还款日期</span>
          <span class="cell-content text-overflow">
            <span v-html="plan.repaymentDate?`每月${plan.repaymentDate}日`:`未设置`"></span>
          </span>
        </div>
        <div class="card-cell">
          <span class="cell-label">执行日期</span>
          <span class="cell-content text-overflow">
            <calendar
              v-model="plan.executeDate"
              placeholder="选择还款日期"
              required
              :disable-past="true"
              title
              :popup-header-title="'请选择日期'"
            ></calendar>
          </span>
        </div>
      </div>
      <div class="hot-tips">
        <!-- <p>【温馨提示】还款金额不能超过额度的90%,并且卡内预留额度需不低于总额度的10%！</p> -->
      </div>
      <br>
      <div class="card vertical-card">
        <div class="card-cell">
          <div class="card-tips">
            <span>指定时间</span>
          </div>
          <div class="card-content text-overflow">
            <span v-html="plan.executeDate"></span>
          </div>
        </div>
        <div class="card-cell">
          <div class="card-tips">
            <span>还款总金额</span>
          </div>
          <div class="card-content text-overflow">
            <span>￥
              <span v-html="plan.useQuota"></span>
            </span>
          </div>
        </div>
        <div class="card-cell">
          <div class="card-tips">
            <span>预留额度</span>
          </div>
          <div class="card-content text-overflow">
            <span>￥
              <span v-html="reserved"></span>
            </span>
          </div>
        </div>
      </div>
      <br>
      <div class="button-box">
        <div class="button" @click="comfirmTempPlan">生成临时订单</div>
      </div>
    </div>
  </div>
</template>

<script>
import { XInput, Calendar } from "vux";
const pattern = {
  useQuota: /^[1-9][0-9]{1,}/
};
export default {
  name: "repayment-plan",
  data() {
    return {
      theme: "407",
      cardNo: null,
      card: {
        creditBlance: 0
      },
      rate: 0,
      serviceCharge: 1.0,
      plan: {
        useQuota: null, // 本次需还金额
        executeDate: "", // 执行日期
        repaymentDate: "", // 还款日
        statementDate: "" // 账单日
      },
      mostRepaySum: function(value) {
        return {
          valid: /^\d+(\.\d{1,2})?$/.test(value),
          msg: "输入的格式有误！"
        };
      }
    };
  },

  computed: {
    reserved() {
      return (this.plan.useQuota * 0.1).toFixed(2);
    }
  },
  components: { XInput, Calendar },
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    init() {
      this.card = this.$route.params.card;
      this.cardNo = this.$route.params.card.cardNo;
      this.plan.statementDate = this.$route.params.card.billDay;
      this.plan.repaymentDate = this.$route.params.card.repaymentDay;
      if (this.card.creditBlance == 0) {
        this.$vux.alert.show({
          title: "温馨提示",
          content: "您还没有设置信用卡额度，请设置额度后再做计划！",
          onHide: () => {
            this.$router.replace({
              name: "updateCard",
              meta: { title: "修改卡信息" },
              params: { card: this.card }
            });
          }
        });
      }
    },
    checkInfo() {
      if (!pattern.useQuota.test(+this.plan.useQuota)) {
        this.$vux.alert.show({
          title: "温馨提示",
          content: "您输入的金额格式有误！"
        });
        return false;
      }
      if (+this.plan.useQuota > this.card.creditBlance * 0.9) {
        this.$vux.alert.show({
          title: "温馨提示",
          content: "您输入的金额格式超出总额的90%！"
        });
        return false;
      }

      if (!this.plan.statementDate) {
        this.$vux.alert.show({
          title: "温馨提示",
          content: "请设置账单日"
        });
        return false;
      }

      if (!this.plan.repaymentDate) {
        this.$vux.alert.show({
          title: "温馨提示",
          content: "请设置还款日"
        });
        return false;
      }

      if (!this.plan.executeDate) {
        this.$vux.alert.show({
          title: "温馨提示",
          content: "至少选择一天作为还款日期！"
        });
        return false;
      }

      return true;
    },
    submitInfo(address = "") {
      if (this.checkInfo()) {
        this.$vux.loading.show();
        const suserId = sessionStorage.getItem("userid");
        const channelId = this.$route.params.channelId;
        const { cardNo } = this.card;
        const url = "creditcardmanager/task/temporary";
        let params = `suserId=${suserId}&channelId=${channelId}&statementDate=${
          this.plan.statementDate
        }&repaymentDate=${
          this.plan.repaymentDate
        }&bankCardNumber=${cardNo}&useQuota=${this.plan.useQuota}&executeDate=${
          this.plan.executeDate
        }&area=${address}`;
        params = encodeURI(params);
        this.$Http
          .post(url, params)
          .then(res => {
            this.$vux.loading.hide();
            if (res.data.resp_code === "000000") {
              this.$vux.alert.show({
                title: "温馨提示",
                content: res.data.resp_message,
                onHide: () => {
                  this.$router.replace({
                    name: "repaymentPlanList",
                    meta: { title: "计划列表" },
                    params: { cardNo }
                  });
                }
              });
            } else {
              this.$vux.alert.show({
                title: "温馨提示",
                content: res.data.resp_message
              });
            }
          })
          .catch(err => {
            this.$vux.loading.hide();
            //  console.log("请求计划失败！",err);
            this.$vux.alert.show({
              title: "温馨提示",
              content: "服务器繁忙！获取计划失败！"
            });
          });
      }
    },
    comfirmTempPlan() {
      // 确认提醒提交生成的订单
      this.JSGetAddress(address => {
        //  alert("获取地址为==>"+address);
        this.submitInfo(address);
      });

      // 去掉确认信息
      // this.$vux.confirm.show({
      //   title: '温馨提示',
      //   content: "计划执行期间请保证您的预留金额大于还款金额的10%，因卡内余额不足导致还款失败造成的损失，将由您个人承担！",
      //   onConfirm () {
      //       _this.submitInfo();
      //   }
      // })
    },
    JSGetAddress(callback) {
      // IOS和android采用了不同的JS交互方式 这里区分
      let u = navigator.userAgent;
      let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
      try {
        if (!isAndroid) {
          window.WebViewJavascriptBridge.callHandler(
            "JSGetAddress",
            null,
            function(response) {
              callback && callback(response);
              showResponse(response);
            }
          );
        } else {
          callback && callback(window.android.invokeMethod(8, [true]));
        }
      } catch (error) {
        alert("获取定位失败！");
      }
    }
  }
};
</script>
<style scoped>
.repayment-plan {
  width: 100%;
  height: 100%;
  font-size: 1.065rem;
  box-sizing: border-box;
  overflow-y: scroll;
  overflow-x: hidden;
}
.container {
  width: 100%;
  box-sizing: border-box;
}
.card {
  margin-top: 0.625rem;
  padding-left: 1.25rem;
  background-color: #ffffff;
}
.card-cell {
  box-sizing: border-box;
  padding: 0.455rem 1.25rem 0.455rem 0;
  border-bottom: 1px solid #f5f5f5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 3.4375rem;
}
.vertical-card .card-cell {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.55rem 1.25rem 0.55rem 0;
}
.vertical-card .card-tips {
  font-size: 0.9375rem;
  line-height: 1.3125rem;
  margin-bottom: 0.125rem;
}
.vertical-card .card-content {
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: left;
  width: 100%;
  color: #f43530;
}
.cell-label {
  display: inline-block;
  font-size: 1.0625rem;
  min-width: 9rem;
  width: 9rem;
  line-height: 1.5rem;
  height: 1.5rem;
}
.cell-content {
  display: inline-block;
  font-size: 0.875rem;
  flex-grow: 1;
  text-align: right;
  /* height: 1.25rem;
    line-height: 1.25rem; */
  padding-left: 1rem;
  box-sizing: border-box;
}
.card-tips {
  height: 1.3125rem;
  width: 100%;
  box-sizing: border-box;
}

.plan-cell {
  background-color: #ffffff;
  margin-top: 0.625rem;
  padding: 1rem 0 1rem 1.25rem;
}
.plan-date {
  padding-bottom: 1.0125rem;
  border-bottom: 1px solid #ededed;
}
.plan-date > span {
  display: inline-block;
  height: 1.5rem;
  line-height: 1.5rem;
  font-size: 1.0625rem;
}
.plan-detail {
  padding-bottom: 1rem;
  padding-top: 0.25rem;
  box-sizing: border-box;
  border-bottom: 1px solid #ededed;
  font-size: 0.9375rem;
  line-height: 1.3125rem;
}
.plan-detail-cell {
  height: 1.3125rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 1.5rem;
  padding-top: 0.5rem;
}
.plan-sum {
  padding-top: 0.875rem;
  padding-right: 1.5rem;
  font-size: 1.0625rem;
  line-height: 1.5rem;
  text-align: right;
  color: #1f1f1f;
  font-weight: 500;
}
.red {
  color: #ff3c4b;
}
</style>